<template>
  <box2 :title="'环保监测'">
    <div class="content-box">
      <Block v-for="(item, index) in data" :key="index" :data="item"></Block>
    </div>
  </box2>
</template>

<script setup lang="ts">
import { ref, onMounted, defineProps } from 'vue'
import box2 from '../../compNew/box2.vue';
import Block from './block.vue'
import { getEnvironmentCurrent } from '@/api/dataBoard'
import { typeList } from './type.data'
import { cloneDeep } from 'lodash-es';
import * as formatLocalData from '../formatLocalData';

const props = defineProps<{
  isComp: boolean
}>()
const loadingRef = ref(false)
const data = ref(cloneDeep(typeList))


onMounted(() => {
  getData()
})

const getData = async () => {
  loadingRef.value = true
  let res;
  if (props.isComp) {
    res = await formatLocalData.getCurrentValue();
  } else {
    res = await getEnvironmentCurrent();
  }
  loadingRef.value = false
  if (res) {
    const formatData = typeList.map(item => {
      const value = res.find((rItem) => {
        return rItem.classifyName === item.classifyName
      });
      console.log(value);
      return {
        ...item,
        classifyName: item.classifyName.includes('氨氮') ? '氨氮' : item.classifyName,
        value: value.value
      }
    })
    data.value = formatData
  }
}
</script>

<style lang="scss" scoped>
.content-box {
  display: flex;
  flex: 1;
  height: 100%;
  padding: 0 1vh;
  padding-top: 1vh;

  :deep(.block-box) {
    flex-basis: 25%;
  }
}
</style>
